<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片压缩工具 - 在线免费压缩图片</title>
    <meta name="description" content="专业的在线图片压缩工具，支持JPG、PNG、WebP等格式，可自定义压缩质量，批量处理，快速高效">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <i class="ri-image-2-line"></i>
                <span>图片压缩工具</span>
            </div>
            <nav class="nav">
                <button class="nav-btn active" data-mode="single">单张压缩</button>
                <button class="nav-btn" data-mode="batch">批量压缩</button>
            </nav>
        </div>
    </header>

    <main class="main">
        <div class="container">
            <!-- 单张压缩模式 -->
            <section id="single-mode" class="mode-section active">
                <div class="upload-area" id="single-upload">
                    <div class="upload-content">
                        <i class="ri-upload-cloud-2-line upload-icon"></i>
                        <h3>拖放图片到这里</h3>
                        <p>或点击选择文件</p>
                        <p class="file-types">支持格式：JPG、PNG、WebP、GIF（最大10MB）</p>
                        <input type="file" id="single-file-input" accept="image/*" hidden>
                        <button class="upload-btn">选择图片</button>
                    </div>
                </div>

                <div class="options-panel" id="options-panel" style="display: none;">
                    <h3>压缩设置</h3>
                    <div class="options-grid">
                        <div class="option-group">
                            <label for="quality">压缩质量</label>
                            <div class="quality-slider">
                                <input type="range" id="quality" min="10" max="100" value="80" step="5">
                                <span class="quality-value">80%</span>
                            </div>
                            <div class="quality-presets">
                                <button class="preset-btn" data-quality="90">高质量</button>
                                <button class="preset-btn active" data-quality="80">标准</button>
                                <button class="preset-btn" data-quality="60">高压缩</button>
                                <button class="preset-btn" data-quality="40">极限压缩</button>
                            </div>
                        </div>
                        <div class="option-group">
                            <label for="format">输出格式</label>
                            <select id="format">
                                <option value="jpeg">JPEG</option>
                                <option value="png">PNG</option>
                                <option value="webp">WebP</option>
                                <option value="gif">GIF</option>
                            </select>
                        </div>
                    </div>
                    <button class="compress-btn" id="single-compress-btn">
                        <i class="ri-loader-4-line"></i>
                        开始压缩
                    </button>
                </div>

                <div class="result-section" id="single-result" style="display: none;">
                    <h3>压缩结果</h3>
                    <div class="slider-comparison-view" id="slider-view">
                        <div class="slider-container">
                            <div class="image-comparison-slider">
                                <div class="image-slider-wrapper">
                                    <img id="slider-original" alt="原始图片">
                                    <div class="slider-overlay">
                                        <img id="slider-compressed" alt="压缩后图片">
                                        <div class="slider-divider">
                                            <div class="slider-button">
                                                <i class="ri-arrow-left-right-line"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="slider-info">
                                <div class="info-section">
                                    <span>原始: <span id="slider-original-size"></span></span>
                                    <span>压缩后: <span id="slider-compressed-size"></span></span>
                                    <span>压缩率: <span id="slider-compression-ratio"></span></span>
                                </div>
                                <button class="download-btn" id="single-download-btn">
                                    <i class="ri-download-2-line"></i>
                                    下载图片
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 批量压缩模式 -->
            <section id="batch-mode" class="mode-section">
                <div class="upload-area" id="batch-upload">
                    <div class="upload-content">
                        <i class="ri-upload-cloud-2-line upload-icon"></i>
                        <h3>拖放多张图片到这里</h3>
                        <p>或点击选择多个文件</p>
                        <p class="file-types">支持格式：JPG、PNG、WebP、GIF（单张最大10MB，最多10张）</p>
                        <input type="file" id="batch-file-input" accept="image/*" multiple hidden>
                        <button class="upload-btn">选择图片</button>
                    </div>
                </div>

                <div class="batch-options" id="batch-options" style="display: none;">
                    <h3>批量压缩设置</h3>
                    <div class="batch-options-grid">
                        <div class="option-group">
                            <label for="batch-quality">压缩质量</label>
                            <div class="quality-slider">
                                <input type="range" id="batch-quality" min="10" max="100" value="80" step="5">
                                <span class="quality-value">80%</span>
                            </div>
                            <div class="quality-presets">
                                <button class="preset-btn" data-quality="90">高质量</button>
                                <button class="preset-btn active" data-quality="80">标准</button>
                                <button class="preset-btn" data-quality="60">高压缩</button>
                                <button class="preset-btn" data-quality="40">极限压缩</button>
                            </div>
                        </div>
                        <div class="option-group">
                            <label for="batch-format">输出格式</label>
                            <select id="batch-format">
                                <option value="jpeg">JPEG</option>
                                <option value="png">PNG</option>
                                <option value="webp">WebP</option>
                                <option value="gif">GIF</option>
                            </select>
                        </div>
                    </div>
                    <button class="compress-btn" id="batch-compress-btn">
                        <i class="ri-loader-4-line"></i>
                        开始批量压缩
                    </button>
                </div>

                <div class="batch-results" id="batch-results" style="display: none;">
                    <h3>批量压缩结果</h3>
                    <div class="batch-summary">
                        <div class="summary-item">
                            <span>原始总大小:</span>
                            <span id="batch-original-total">0</span>
                        </div>
                        <div class="summary-item">
                            <span>压缩后总大小:</span>
                            <span id="batch-compressed-total">0</span>
                        </div>
                        <div class="summary-item">
                            <span>节省空间:</span>
                            <span id="batch-saved">0</span>
                        </div>
                        <button class="download-all-btn" id="download-all-btn">
                            <i class="ri-download-2-line"></i>
                            下载所有图片
                        </button>
                    </div>
                    <div class="batch-grid" id="batch-grid"></div>
                </div>
            </section>
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 图片压缩工具. 免费在线压缩图片，保护您的隐私安全</p>
        </div>
    </footer>

    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loading-overlay">
        <div class="loading-spinner">
            <i class="ri-loader-4-line"></i>
            <p>正在压缩图片，请稍候...</p>
        </div>
    </div>

    <!-- Toast 通知 -->
    <div class="toast" id="toast"></div>

    <script src="script.js"></script>
</body>
</html>